﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
	<!-- Meta -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="keywords" content="">
	<meta name="robots" content="all">
	<title></title>

	<!-- Bootstrap Core CSS -->
	<link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">

	<!-- Customizable CSS -->
	<link rel="stylesheet" th:href="@{/assets/css/main.css}">
	<link rel="stylesheet" th:href="@{/assets/css/blue.css}">
	<link rel="stylesheet" th:href="@{/assets/css/owl.carousel.css}">
	<link rel="stylesheet" th:href="@{/assets/css/owl.transitions.css}">
	<link rel="stylesheet" th:href="@{/assets/css/animate.min.css}">
	<link rel="stylesheet" th:href="@{/assets/css/rateit.css}">
	<link rel="stylesheet" th:href="@{/assets/css/bootstrap-select.min.css}">

	<!-- Icons/Glyphs -->
	<link rel="stylesheet" th:href="@{/assets/css/font-awesome.css}">

	<!-- Fonts -->
	<link
			href="https://fonts.googleapis.com/css?family=Barlow:200,300,300i,400,400i,500,500i,600,700,800"
			rel="stylesheet">
	<link
			href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700'
			rel='stylesheet' type='text/css'>
	<link
			href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,600italic,700,700italic,800'
			rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700'
		  rel='stylesheet' type='text/css'>
</head>
<body class="cnt-home">
<!-- ============================================== HEADER ============================================== -->
<header class="header-style-1">

	<!-- ============================================== TOP MENU ============================================== -->
	<div class="top-bar animate-dropdown">
		<div class="container">
			<div class="header-top-inner">
				<div class="cnt-account">
					<ul class="list-unstyled">
						<li class="myaccount"><a href="#"><span>My
										Account</span></a></li>
						<li class="wishlist"><a href="#"><span>Wishlist</span></a></li>
						<li class="header_cart hidden-xs"><a href="#"><span>My
										Cart</span></a></li>
						<li class="check"><a href="#"><span>Checkout</span></a></li>
						<li class="login"><a href="#"><span>Login</span></a></li>
					</ul>
				</div>
				<!-- /.cnt-account -->

				<div class="cnt-block">
					<ul class="list-unstyled list-inline">
						<li class="dropdown dropdown-small"><a href="#"
															   class="dropdown-toggle" data-hover="dropdown"
															   data-toggle="dropdown"><span class="value">USD </span><b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">USD</a></li>
								<li><a href="#">INR</a></li>
								<li><a href="#">GBP</a></li>
							</ul></li>
						<li class="dropdown dropdown-small"><a href="#"
															   class="dropdown-toggle" data-hover="dropdown"
															   data-toggle="dropdown"><span class="value">English </span><b
								class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">English</a></li>
								<li><a href="#">French</a></li>
								<li><a href="#">German</a></li>
							</ul></li>
					</ul>
					<!-- /.list-unstyled -->
				</div>
				<!-- /.cnt-cart -->
				<div class="clearfix"></div>
			</div>
			<!-- /.header-top-inner -->
		</div>
		<!-- /.container -->
	</div>
	<!-- /.header-top -->
	<!-- ============================================== TOP MENU : END ============================================== -->
	<div class="main-header">
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-3 logo-holder">
					<!-- ============================================================= LOGO ============================================================= -->
					<div class="logo">
						<a href="/"> <img th:src="@{/assets/images/logo.png}"
										  alt="logo">
						</a>
					</div>
					<!-- /.logo -->
					<!-- ============================================================= LOGO : END ============================================================= -->
				</div>
				<!-- /.logo-holder -->

				<div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 top-search-holder">
					<!-- /.contact-row -->
					<!-- ============================================================= SEARCH AREA ============================================================= -->
					<div class="search-area">
						<form>
							<div class="control-group">
								<ul class="categories-filter animate-dropdown">
									<li class="dropdown"><a class="dropdown-toggle"
															data-toggle="dropdown" href="category.html">Categories <b
											class="caret"></b></a>
										<ul class="dropdown-menu" role="menu">
											<li class="menu-header">Computer</li>
											<li role="presentation"><a role="menuitem"
																	   tabindex="-1" href="category.html">- Clothing</a></li>
											<li role="presentation"><a role="menuitem"
																	   tabindex="-1" href="category.html">- Electronics</a></li>
											<li role="presentation"><a role="menuitem"
																	   tabindex="-1" href="category.html">- Shoes</a></li>
											<li role="presentation"><a role="menuitem"
																	   tabindex="-1" href="category.html">- Watches</a></li>
										</ul></li>
								</ul>
								<input class="search-field" placeholder="Search here..." /> <a
									class="search-button" href="#"></a>
							</div>
						</form>
					</div>
					<!-- /.search-area -->
					<!-- ============================================================= SEARCH AREA : END ============================================================= -->
				</div>
				<!-- /.top-search-holder -->

				<div
						class="col-lg-2 col-md-3 col-sm-4 col-xs-12 animate-dropdown top-cart-row">
					<!-- ============================================================= SHOPPING CART DROPDOWN ============================================================= -->

					<div class="dropdown dropdown-cart">
						<a href="#" class="dropdown-toggle lnk-cart"
						   data-toggle="dropdown">
							<div class="items-cart-inner">
								<div class="basket">
									<div class="basket-item-count">
										<span class="count">2</span>
									</div>
									<div class="total-price-basket">
										<span class="lbl">Shopping Cart</span> <span class="value">$4580</span>
									</div>
								</div>
							</div>
						</a>
						<ul class="dropdown-menu">
							<li>
								<div class="cart-item product-summary">
									<div class="row">
										<div class="col-xs-4">
											<div class="image">
												<a href="detail.html"><img
														src="assets/images/products/p4.jpg}" alt=""></a>
											</div>
										</div>
										<div class="col-xs-7">
											<h3 class="name">
												<a href="detail.html">Simple Product</a>
											</h3>
											<div class="price">$600.00</div>
										</div>
										<div class="col-xs-1 action">
											<a href="#"><i class="fa fa-trash"></i></a>
										</div>
									</div>
								</div> <!-- /.cart-item -->
								<div class="clearfix"></div>
								<hr>
								<div class="clearfix cart-total">
									<div class="pull-right">
										<span class="text">Sub Total :</span><span class='price'>$600.00</span>
									</div>
									<div class="clearfix"></div>
									<a href="#" class="btn btn-upper btn-primary btn-block m-t-20">Checkout</a>
								</div> <!-- /.cart-total-->

							</li>
						</ul>
						<!-- /.dropdown-menu-->
					</div>
					<!-- /.dropdown-cart -->

					<!-- ============================================================= SHOPPING CART DROPDOWN : END============================================================= -->
				</div>
				<!-- /.top-cart-row -->
			</div>
			<!-- /.row -->

		</div>
		<!-- /.container -->

	</div>
	<!-- /.main-header -->

	<!-- ============================================== NAVBAR ============================================== -->
	<div class="header-nav animate-dropdown">
		<div class="container">
			<div class="yamm navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
						<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
					</button>
				</div>
				<div class="nav-bg-class">
					<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse">
						<div class="nav-outer">
							<ul class="nav navbar-nav" th:include="common/menu::menu_top">

							</ul>
							<!-- /.navbar-nav -->
							<div class="clearfix"></div>
						</div>
						<!-- /.nav-outer -->
					</div>
					<!-- /.navbar-collapse -->

				</div>
				<!-- /.nav-bg-class -->
			</div>
			<!-- /.navbar-default -->
		</div>
		<!-- /.container-class -->

	</div>
	<!-- /.header-nav -->
	<!-- ============================================== NAVBAR : END ============================================== -->

</header>

<!-- ============================================== HEADER : END ============================================== -->

<!-- ============================================== HEADER : END ============================================== -->
<div class="breadcrumb">
	<div class="container">
		<div class="breadcrumb-inner">
			<ul class="list-inline list-unstyled">
				<li style=width:50px><a href="/">首页</a></li>
				<li class='active' th:text="${typeName}">Handbage</li>
			</ul>
		</div>
	</div>
</div>
<!-- /.breadcrumb -->
<div class="body-content outer-top-xs">
	<div class='container'>
		<div class='row'>
			<div class='col-xs-12 col-sm-12 col-md-3 sidebar'>
				<!-- ================================== TOP NAVIGATION ================================== -->


				<div class="side-menu animate-dropdown outer-bottom-xs" th:include="common/menu::menu"></div>


				<!-- /.side-menu -->
				<!-- ================================== TOP NAVIGATION : END ================================== -->
				<div class="sidebar-module-container">
					<div class="sidebar-filter">
						<!-- ============================================== SIDEBAR CATEGORY ============================================== -->
						<div class="sidebar-widget">
							<h3 class="section-title">待开发新品</h3>
							<div class="widget-header">
								<h4 class="widget-title">Shopp分类</h4>
							</div>
							<div class="sidebar-widget-body">
								<div class="accordion">
									<div class="accordion-group">
										<div class="accordion-heading">
											<a href="#collapseOne" data-toggle="collapse"
											   class="accordion-toggle collapsed"> 数码 </a>
										</div>
										<!-- /.accordion-heading -->
										<div class="accordion-body collapse" id="collapseOne"
											 style="height: 0px;">
											<div class="accordion-inner">
												<ul>
													<li><a href="#">笔记本</a></li>
													<li><a href="#"></a></li>
													<li><a href="#">kids</a></li>
													<li><a href="#">for women</a></li>
												</ul>
											</div>
											<!-- /.accordion-inner -->
										</div>
										<!-- /.accordion-body -->
									</div>
									<!-- /.accordion-group -->

									<div class="accordion-group">
										<div class="accordion-heading">
											<a href="#collapseTwo" data-toggle="collapse"
											   class="accordion-toggle collapsed"> Desktops </a>
										</div>
										<!-- /.accordion-heading -->
										<div class="accordion-body collapse" id="collapseTwo"
											 style="height: 0px;">
											<div class="accordion-inner">
												<ul>
													<li><a href="#">gaming</a></li>
													<li><a href="#">office</a></li>
													<li><a href="#">kids</a></li>
													<li><a href="#">for women</a></li>
												</ul>
											</div>
											<!-- /.accordion-inner -->
										</div>
										<!-- /.accordion-body -->
									</div>
									<!-- /.accordion-group -->

									<div class="accordion-group">
										<div class="accordion-heading">
											<a href="#collapseThree" data-toggle="collapse"
											   class="accordion-toggle collapsed"> Pants </a>
										</div>
										<!-- /.accordion-heading -->
										<div class="accordion-body collapse" id="collapseThree"
											 style="height: 0px;">
											<div class="accordion-inner">
												<ul>
													<li><a href="#">gaming</a></li>
													<li><a href="#">office</a></li>
													<li><a href="#">kids</a></li>
													<li><a href="#">for women</a></li>
												</ul>
											</div>
											<!-- /.accordion-inner -->
										</div>
										<!-- /.accordion-body -->
									</div>
									<!-- /.accordion-group -->

									<div class="accordion-group">
										<div class="accordion-heading">
											<a href="#collapseFour" data-toggle="collapse"
											   class="accordion-toggle collapsed"> Bags </a>
										</div>
										<!-- /.accordion-heading -->
										<div class="accordion-body collapse" id="collapseFour"
											 style="height: 0px;">
											<div class="accordion-inner">
												<ul>
													<li><a href="#">gaming</a></li>
													<li><a href="#">office</a></li>
													<li><a href="#">kids</a></li>
													<li><a href="#">for women</a></li>
												</ul>
											</div>
											<!-- /.accordion-inner -->
										</div>
										<!-- /.accordion-body -->
									</div>
									<!-- /.accordion-group -->

									<div class="accordion-group">
										<div class="accordion-heading">
											<a href="#collapseFive" data-toggle="collapse"
											   class="accordion-toggle collapsed"> Hats </a>
										</div>
										<!-- /.accordion-heading -->
										<div class="accordion-body collapse" id="collapseFive"
											 style="height: 0px;">
											<div class="accordion-inner">
												<ul>
													<li><a href="#">gaming</a></li>
													<li><a href="#">office</a></li>
													<li><a href="#">kids</a></li>
													<li><a href="#">for women</a></li>
												</ul>
											</div>
											<!-- /.accordion-inner -->
										</div>
										<!-- /.accordion-body -->
									</div>
									<!-- /.accordion-group -->

									<div class="accordion-group">
										<div class="accordion-heading">
											<a href="#collapseSix" data-toggle="collapse"
											   class="accordion-toggle collapsed"> Accessories </a>
										</div>
										<!-- /.accordion-heading -->
										<div class="accordion-body collapse" id="collapseSix"
											 style="height: 0px;">
											<div class="accordion-inner">
												<ul>
													<li><a href="#">gaming</a></li>
													<li><a href="#">office</a></li>
													<li><a href="#">kids</a></li>
													<li><a href="#">for women</a></li>
												</ul>
											</div>
											<!-- /.accordion-inner -->
										</div>
										<!-- /.accordion-body -->
									</div>
									<!-- /.accordion-group -->

								</div>
								<!-- /.accordion -->
							</div>
							<!-- /.sidebar-widget-body -->
						</div>
						<!-- /.sidebar-widget -->
						<!-- ============================================== SIDEBAR CATEGORY : END ============================================== -->

						<!-- ============================================== PRICE SILDER============================================== -->
						<!-- <div class="sidebar-widget">
                            <div class="widget-header">
                                <h4 class="widget-title">Price Slider</h4>
                            </div>
                            <div class="sidebar-widget-body m-t-10">
                                <div class="price-range-holder">
                                    <span class="min-max"> <span class="pull-left">$200.00</span>
                                        <span class="pull-right">$800.00</span>
                                    </span> <input type="text" id="amount"
                                        style="border: 0; color: #666666; font-weight: bold; text-align: center;">
                                    <input type="text" class="price-slider" value="">
                                </div>
                                /.price-range-holder
                                <a href="#" class="lnk btn btn-primary">Show Now</a>
                            </div>
                            /.sidebar-widget-body
                        </div> -->
						<!-- /.sidebar-widget -->
						<!-- ============================================== PRICE SILDER : END ============================================== -->
						<!-- ============================================== MANUFACTURES============================================== -->
						<!-- <div class="sidebar-widget">
                            <div class="widget-header">
                                <h4 class="widget-title">Manufactures</h4>
                            </div>
                            <div class="sidebar-widget-body">
                                <ul class="list">
                                    <li><a href="#">Forever 18</a></li>
                                    <li><a href="#">Nike</a></li>
                                    <li><a href="#">Dolce & Gabbana</a></li>
                                    <li><a href="#">Alluare</a></li>
                                    <li><a href="#">Chanel</a></li>
                                    <li><a href="#">Other Brand</a></li>
                                </ul>
                                <a href="#" class="lnk btn btn-primary">Show Now</a>
                            </div>
                            /.sidebar-widget-body
                        </div> -->
						<!-- /.sidebar-widget -->
						<!-- ============================================== MANUFACTURES: END ============================================== -->
						<!-- ============================================== COLOR============================================== -->
						<!-- <div class="sidebar-widget">
                            <div class="widget-header">
                                <h4 class="widget-title">Colors</h4>
                            </div>
                            <div class="sidebar-widget-body">
                                <ul class="list">
                                    <li><a href="#">Red</a></li>
                                    <li><a href="#">Blue</a></li>
                                    <li><a href="#">Yellow</a></li>
                                    <li><a href="#">Pink</a></li>
                                    <li><a href="#">Brown</a></li>
                                    <li><a href="#">Teal</a></li>
                                </ul>
                            </div>
                            /.sidebar-widget-body
                        </div> -->
						<!-- /.sidebar-widget -->
						<!-- ============================================== COLOR: END ============================================== -->
						<!-- ============================================== COMPARE============================================== -->
						<div class="sidebar-widget newsletter outer-bottom-small">
							<h3 class="section-title">时实通讯</h3>
							<div class="sidebar-widget-body outer-top-xs">
								<p>注册我们的时事通讯！</p>
								<form>
									<div class="form-group">
										<label class="sr-only" for="exampleInputEmail1">Email address</label>
										<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请注册！">
									</div>
									<button class="btn btn-primary">点击注册</button>
								</form>
							</div>
							<!-- /.sidebar-widget-body -->
						</div>
						<!-- /.sidebar-widget -->
						<!-- ============================================== COMPARE: END ============================================== -->
						<!-- ============================================== PRODUCT TAGS ============================================== -->



						<div class="side-menu animate-dropdown outer-bottom-xs" th:include="common/menu::menu_kuaijie "></div>



						<!-- /.sidebar-widget -->
						<!-- /.Testimonials -->



						<div class="sidebar-widget hot-deals outer-bottom-xs">
							<h3 class="section-title">Spring 热销中...</h3>
							<div class="owl-carousel sidebar-carousel custom-carousel owl-theme outer-top-ss">
								<div class="item" th:each="eo:${newprod.price}">
									<div class="products" >
										<div class="hot-deal-wrapper">
											<div class="image">
												<a href="#">" alt="">
													<img th:src="${'http://img.dczzs.com'+eo.imgUrl1}" >
													<img th:src="${'http://img.dczzs.com'+eo.imgUrl1}" class="hover-image">
												</a>
											</div>
											<div class="sale-offer-tag"><span>49%<br>
                    off</span></div>h
											<div class="timing-wrapper">
												<div class="box-wrapper">
													<div class="date box"> <span class="key">120</span> <span class="value">DAYS</span> </div>
												</div>
												<div class="box-wrapper">
													<div class="hour box"> <span class="key">20</span> <span class="value">HRS</span> </div>
												</div>
												<div class="box-wrapper">
													<div class="minutes box"> <span class="key">36</span> <span class="value">MINS</span> </div>
												</div>
												<div class="box-wrapper">
													<div class="seconds box"> <span class="key">60</span> <span class="value">SEC</span> </div>
												</div>
											</div>
										</div>
										<!-- /.hot-deal-wrapper -->

										<div class="product-info text-left m-t-20">
											<h3 class="name"><a href="detail.html" th:text="${eo.prodName}"  >Floral Print Buttoned</a></h3>
											<div class="rating rateit-small"></div>
											<div class="product-price"> <span class="price" th:text="${eo.price}"> $600.00 </span> <span class="price-before-discount">$800.00</span> </div>
											<!-- /.product-price -->

										</div>
										<!-- /.product-info -->

										<div class="cart clearfix animate-effect">
											<div class="action">
												<div class="add-cart-button btn-group">
													<button class="btn btn-primary icon" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart"></i> </button>
													<button class="btn btn-primary cart-btn" type="button">添加到购物车</button>
												</div>
											</div>
											<!-- /.action -->
										</div>
										<!-- /.cart -->
									</div>
								</div>
							</div>
							<!-- /.sidebar-widget -->
						</div>

						<!-- ============================================== Testimonials: END ============================================== -->

						<!-- ============================================== NEWSLETTER ============================================== -->
						<!-- <div
                            class="sidebar-widget newsletter outer-bottom-small  outer-top-vs">
                            <h3 class="section-title">Newsletters</h3>
                            <div class="sidebar-widget-body outer-top-xs">
                                <p>Sign Up for Our Newsletter!</p>
                                <form>
                                    <div class="form-group">
                                        <label class="sr-only" for="exampleInputEmail1">Email
                                            address</label> <input type="email" class="form-control"
                                            id="exampleInputEmail1"
                                            placeholder="Subscribe to our newsletter">
                                    </div>
                                    <button class="btn btn-primary">Subscribe</button>
                                </form>
                            </div>
                            /.sidebar-widget-body
                        </div> -->
						<!-- /.sidebar-widget -->
						<!-- ============================================== NEWSLETTER: END ============================================== -->


					</div>
					<!-- /.sidebar-filter -->
				</div>
				<!-- /.sidebar-module-container -->
			</div>
			<!-- /.sidebar -->
			<div class="col-xs-12 col-sm-12 col-md-9 rht-col">
				<!-- ========================================== SECTION – HERO ========================================= -->

				<div id="category" class="category-carousel hidden-xs">
					<div class="item" >
						<div class="image">
							<img th:src="@{/assets/images/banners/cat-banner-1.jpg}" alt=""
								 class="img-responsive">
						</div>
						<div class="container-fluid">
							<div class="caption vertical-top text-left">
								<div class="big-text">Big Sale</div>
								<div class="excerpt hidden-sm hidden-md">Save up to 49%
									off</div>
								<div class="excerpt-normal hidden-sm hidden-md">Lorem
									ipsum dolor sit amet, consectetur adipiscing elit</div>
								<div class="buy-btn">
									<a href="#" class="lnk btn btn-primary">Show Now</a>
								</div>
							</div>
							<!-- /.caption -->
						</div>
						<!-- /.container-fluid -->
					</div>
				</div>


				<div class="clearfix filters-container m-t-10">
					<div class="row">
						<div class="col col-sm-6 col-md-3 col-lg-3 col-xs-6">
							<div class="filter-tabs">
								<ul id="filter-tabs"
									class="nav nav-tabs nav-tab-box nav-tab-fa-icon">
									<li class="active"><a data-toggle="tab"
														  href="#grid-container"><i class="icon fa fa-th-large"></i>Grid</a>
									</li>
									<li><a data-toggle="tab" href="#list-container"><i
											class="icon fa fa-bars"></i>List</a></li>
								</ul>
							</div>
							<!-- /.filter-tabs -->
						</div>
						<!-- /.col -->









						<div class="col col-sm-12 col-md-5 col-lg-5 hidden-sm">
							<div class="col col-sm-6 col-md-6 no-padding">
								<div class="lbl-cnt">
									<span class="lbl">商品查看</span>
									<div class="fld inline">
										<div
												class="dropdown dropdown-small dropdown-med dropdown-white inline">
											<button data-toggle="dropdown" type="button"
													class="btn dropdown-toggle">
												Position <span class="caret"></span>
											</button>
											<ul role="menu" class="dropdown-menu">
												<li role="presentation"><a th:href="${'/list/' + typeId + '?orderby=price'}">价格</a></li>
												<li role="presentation"><a th:href="${'/list/' + typeId + '?orderby=kucun'}">库存</a></li>
											</ul>
										</div>
									</div>
									<!-- /.fld -->
								</div>
								<!-- /.lbl-cnt -->
							</div>
							<!-- /.col -->
							<div
									class="col col-sm-6 col-md-6 no-padding hidden-sm hidden-md">
								<!-- /.lbl-cnt -->
							</div>
							<!-- /.col -->
						</div>












						<!-- /.col -->
						<div class="col col-sm-6 col-md-4 col-xs-6 col-lg-4 text-right">
							<div class="pagination-container">
								<ul class="list-inline list-unstyled">
									<li class="prev">
										<a th:href="${'/list/' + typeId + '/' + (page.current-1)}">
											<i class="fa fa-angle-left"></i>
										</a>
									</li>
									<li th:each="i:${#numbers.sequence(1,page.pages)}">
										<a th:href="${'/list/' + typeId + '/' + 'i'}" th:text="${i}"></a>
									</li>
									<li class="next" th:switch="${page.current+1} gt ${page.pages}">
										<a th:case = "true" th:href="${'/list/' + typeId + '/' + (page.current)}">
											<i class="fa fa-angle-right"></i>
										</a>
										<a th:case = "false" th:href="${'/list/' + typeId + '/' + (page.current+1)}">
											<i class="fa fa-angle-right"></i>
										</a>
									</li>
								</ul>
								<!-- /.list-inline -->
							</div>
							<!-- /.pagination-container -->
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->

				</div>
				<div class="search-result-container ">
					<div id="myTabContent" class="tab-content category-list">
						<div class="tab-pane active " id="grid-container">
							<div class="category-product">
								<div class="row">
									<div class="col-sm-6 col-md-4 col-lg-3" th:each="eo:${datalist}">
										<div class="item">
											<div class="products">
												<div class="product">
													<div class="product-image">
														<div class="image">
															<a href="detail.html" th:href="${'/detail/' + eo.prodId}">
																<img th:src="${'http://img.dczzs.com'+eo.imgUrl1}" alt="">
																<img th:src="${'http://img.dczzs.com'+eo.imgUrl1}"alt=""
																	 class="hover-image">
															</a>
														</div>
														<!-- /.image -->

														<div class="tag new">
															<span>new</span>
														</div>
													</div>
													<!-- /.product-image -->

													<div class="product-info text-left">
														<h3 class="name">
															<a href="detail.html" th:href="${'/detail/' + eo.prodId}" th:text="${eo.prodName}" ></a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="description"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->

													</div>
													<!-- /.product-info -->
													<div class="cart clearfix animate-effect">
														<div class="action">
															<ul class="list-unstyled">
																<li class="add-cart-button btn-group">
																	<button class="btn btn-primary icon"
																			data-toggle="dropdown" type="button">
																		<i class="fa fa-shopping-cart"></i>
																	</button>
																	<button class="btn btn-primary cart-btn" type="button">Add
																		to cart</button>
																</li>
																<li class="lnk wishlist"><a class="add-to-cart"
																							href="detail.html" title="Wishlist"> <i
																		class="icon fa fa-heart"></i>
																</a></li>
																<li class="lnk"><a class="add-to-cart"
																				   href="detail.html" title="Compare"> <i
																		class="fa fa-signal"></i>
																</a></li>
															</ul>
														</div>
														<!-- /.action -->
													</div>
													<!-- /.cart -->
												</div>
												<!-- /.product -->

											</div>
											<!-- /.products -->
										</div>
									</div>
									<!-- /.item -->
								</div>
								<!-- /.row -->
							</div>
							<!-- /.category-product -->

						</div>
						<!-- /.tab-pane -->

						<div class="tab-pane " id="list-container">
							<div class="category-product">
								<div class="category-product-inner" th:each="eo:${datalist}">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="${'http://img.dczzs.com'+eo.imgUrl1}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag new">
												<span>new</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p4.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag sale">
												<span>sale</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p5.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag hot">
												<span>hot</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p6.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag hot">
												<span>hot</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p7.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag sale">
												<span>sale</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p8.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag new">
												<span>new</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p9.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag new">
												<span>new</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p10.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag sale">
												<span>sale</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p11.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag hot">
												<span>hot</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p12.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag new">
												<span>new</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p13.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag sale">
												<span>sale</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

								<div class="category-product-inner">
									<div class="products">
										<div class="product-list product">
											<div class="row product-list-row">
												<div class="col col-sm-3 col-lg-3">
													<div class="product-image">
														<div class="image">
															<img th:src="@{/assets/images/products/p14.jpg}" alt="">
														</div>
													</div>
													<!-- /.product-image -->
												</div>
												<!-- /.col -->
												<div class="col col-sm-9 col-lg-9">
													<div class="product-info">
														<h3 class="name">
															<a href="detail.html">Floral Print Buttoned</a>
														</h3>
														<div class="rating rateit-small"></div>
														<div class="product-price">
															<span class="price"> $450.99 </span> <span
																class="price-before-discount">$ 800</span>
														</div>
														<!-- /.product-price -->
														<div class="description m-t-10">Suspendisse posuere
															arcu diam, id accumsan eros pharetra ac. Nulla enim
															risus, facilisis bibendum gravida eget, lacinia id
															purus. Suspendisse posuere arcu diam, id accumsan eros
															pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget. Suspendisse posuere arcu diam, id accumsan
															eros pharetra ac. Nulla enim risus, facilisis bibendum
															gravida eget, lacinia id purus. Suspendisse posuere arcu
															diam, id accumsan eros pharetra.</div>
														<div class="cart clearfix animate-effect">
															<div class="action">
																<ul class="list-unstyled">
																	<li class="add-cart-button btn-group">
																		<button class="btn btn-primary icon"
																				data-toggle="dropdown" type="button">
																			<i class="fa fa-shopping-cart"></i>
																		</button>
																		<button class="btn btn-primary cart-btn"
																				type="button">Add to cart</button>
																	</li>
																	<li class="lnk wishlist"><a class="add-to-cart"
																								href="detail.html" title="Wishlist"> <i
																			class="icon fa fa-heart"></i>
																	</a></li>
																	<li class="lnk"><a class="add-to-cart"
																					   href="detail.html" title="Compare"> <i
																			class="fa fa-signal"></i>
																	</a></li>
																</ul>
															</div>
															<!-- /.action -->
														</div>
														<!-- /.cart -->

													</div>
													<!-- /.product-info -->
												</div>
												<!-- /.col -->
											</div>
											<!-- /.product-list-row -->
											<div class="tag hot">
												<span>hot</span>
											</div>
										</div>
										<!-- /.product-list -->
									</div>
									<!-- /.products -->
								</div>
								<!-- /.category-product-inner -->

							</div>
							<!-- /.category-product -->
						</div>
						<!-- /.tab-pane #list-container -->
					</div>
					<!-- /.tab-content -->
					<div class="clearfix filters-container bottom-row">
						<div class="text-right">
							<div class="pagination-container">
								<ul class="list-inline list-unstyled">
									<li class="prev"><a href="#">
										<i class="fa fa-angle-left"></i>
									</a>
									</li>
									<li th:each="i:${#numbers.sequence(1,page.pages)}">
										<a th:href="${'/list/' + typeId + '/' + 'i'}" th:text="${i}"></a>
									</li>

									<li class="next" th:switch="${page.current+1} gt ${page.pages}">
										<a th:case = "true" th:href="${'/list/' + typeId + '/' + (page.current)}">
											<i class="fa fa-angle-right"></i>
										</a>
										<a th:case = "false" th:href="${'/list/' + typeId + '/' + (page.current+1)}">
											<i class="fa fa-angle-right"></i>
										</a>
									</li>
								</ul>
								<!-- /.list-inline -->
							</div>
							<!-- /.pagination-container -->
						</div>
						<!-- /.text-right -->

					</div>
					<!-- /.filters-container -->

				</div>
				<!-- /.search-result-container -->

			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->
		<!-- ============================================== BRANDS CAROUSEL ============================================== -->
		<div id="brands-carousel" class="logo-slider">
			<div class="logo-slider-inner">
				<div id="brand-slider"
					 class="owl-carousel brand-slider custom-carousel owl-theme">
					<div class="item m-t-15">
						<a href="#" class="image"> <img
								data-echo="assets/images/brands/brand1.png}"
								src="assets/images/blank.gif" alt="">
						</a>
					</div>
					<!--/.item-->

					<div class="item m-t-10">
						<a href="#" class="image"> <img
								data-echo="assets/images/brands/brand2.png}"
								src="assets/images/blank.gif" alt="">
						</a>
					</div>
					<!--/.item-->

					<div class="item">
						<a href="#" class="image"> <img
								data-echo="assets/images/brands/brand3.png}"
								src="assets/images/blank.gif" alt="">
						</a>
					</div>
					<!--/.item-->

					<div class="item">
						<a href="#" class="image"> <img
								data-echo="assets/images/brands/brand4.png}"
								src="assets/images/blank.gif" alt="">
						</a>
					</div>
					<!--/.item-->

					<div class="item">
						<a href="#" class="image"> <img
								data-echo="assets/images/brands/brand5.png}"
								src="assets/images/blank.gif" alt="">
						</a>
					</div>
					<!--/.item-->

					<div class="item">
						<a href="#" class="image"> <img
								data-echo="assets/images/brands/brand6.png}"
								src="assets/images/blank.gif" alt="">
						</a>
					</div>
					<!--/.item-->

					<div class="item">
						<a href="#" class="image"> <img
								data-echo="assets/images/brands/brand2.png}"
								src="assets/images/blank.gif" alt="">
						</a>
					</div>
					<!--/.item-->

					<div class="item">
						<a href="#" class="image"> <img
								data-echo="assets/images/brands/brand4.png}"
								src="assets/images/blank.gif" alt="">
						</a>
					</div>
					<!--/.item-->

					<div class="item">
						<a href="#" class="image"> <img
								data-echo="assets/images/brands/brand1.png}"
								src="assets/images/blank.gif" alt="">
						</a>
					</div>
					<!--/.item-->

					<div class="item">
						<a href="#" class="image"> <img
								data-echo="assets/images/brands/brand5.png}"
								src="assets/images/blank.gif" alt="">
						</a>
					</div>
					<!--/.item-->
				</div>
				<!-- /.owl-carousel #logo-slider -->
			</div>
			<!-- /.logo-slider-inner -->

		</div>
		<!-- /.logo-slider -->
		<!-- ============================================== BRANDS CAROUSEL : END ============================================== -->
	</div>
	<!-- /.container -->

</div>
<!-- /.body-content -->
<!-- ============================================================= FOOTER ============================================================= -->

<!-- ============================================== INFO BOXES ============================================== -->
<!-- <div class="row our-features-box">
    <div class="container">
        <ul>
            <li>
                <div class="feature-box">
                    <div class="icon-truck"></div>
                    <div class="content-blocks">We ship worldwide</div>
                </div>
            </li>
            <li>
                <div class="feature-box">
                    <div class="icon-support"></div>
                    <div class="content-blocks">call +1 800 789 0000</div>
                </div>
            </li>
            <li>
                <div class="feature-box">
                    <div class="icon-money"></div>
                    <div class="content-blocks">Money Back Guarantee</div>
                </div>
            </li>
            <li>
                <div class="feature-box">
                    <div class="icon-return"></div>
                    <div class="content">30 days return</div>
                </div>
            </li>

        </ul>
    </div>
</div> -->
<!-- /.info-boxes -->
<!-- ============================================== INFO BOXES : END ============================================== -->

<!-- ============================================================= FOOTER ============================================================= -->
<footer id="footer" class="footer color-bg">
	<div class="footer-bottom">
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-md-3">
					<div class="address-block">

						<div class="module-body">
							<ul class="toggle-footer" style="">
								<li class="media">
									<div class="pull-left"> <span class="icon fa-stack fa-lg"> <i class="fa fa-map-marker fa-stack-1x fa-inverse"></i> </span> </div>
									<div class="media-body">
										<p>ThemesGround, 789 Main rd, Anytown, CA 12345 USA</p>
									</div>
								</li>
								<li class="media">
									<div class="pull-left"> <span class="icon fa-stack fa-lg"> <i class="fa fa-mobile fa-stack-1x fa-inverse"></i> </span> </div>
									<div class="media-body">
										<p> + (888) 123-4567 / + (888) 456-7890</p>
									</div>
								</li>
								<li class="media">
									<div class="pull-left"> <span class="icon fa-stack fa-lg"> <i class="fa fa-envelope fa-stack-1x fa-inverse"></i> </span> </div>
									<div class="media-body"> <span><a href="#">marazzo@themesground.com</a></span> </div>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<div class="col-xs-12 col-sm-6 col-md-3">
					<div class="module-heading">
						<h4 class="module-title">Customer Service</h4>
					</div>

					<div class="module-body">
						<ul class='list-unstyled'>
							<li class="first"><a href="#" title="Contact us">My Account</a></li>
							<li><a href="#" title="About us">Order History</a></li>
							<li><a href="#" title="faq">FAQ</a></li>
							<li><a href="#" title="Popular Searches">Specials</a></li>
							<li class="last"><a href="#" title="Where is my order?">Help Center</a></li>
						</ul>
					</div>
				</div>

				<div class="col-xs-12 col-sm-6 col-md-3">
					<div class="module-heading">
						<h4 class="module-title">Corporation</h4>
					</div>

					<div class="module-body">
						<ul class='list-unstyled'>
							<li class="first"><a title="Your Account" href="#">About us</a></li>
							<li><a title="Information" href="#">Customer Service</a></li>
							<li><a title="Addresses" href="#">Company</a></li>
							<li><a title="Addresses" href="#">Investor Relations</a></li>
							<li class="last"><a title="Orders History" href="#">Advanced Search</a></li>
						</ul>
					</div>
				</div>
				<div class="col-xs-12 col-sm-6 col-md-3">
					<div class="module-heading">
						<h4 class="module-title">Why Choose Us</h4>
					</div>

					<div class="module-body">
						<ul class='list-unstyled'>
							<li class="first"><a href="#" title="About us">Shopping Guide</a></li>
							<li><a href="#" title="Blog">Blog</a></li>
							<li><a href="#" title="Company">Company</a></li>
							<li><a href="#" title="Investor Relations">Investor Relations</a></li>
							<li class=" last"><a href="contact-us.html" title="Suppliers">Contact Us</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="copyright-bar">
		<div class="container">
			<div class="col-xs-12 col-sm-4 no-padding social">
				<ul class="link">
					<li class="fb pull-left"><a target="_blank" rel="nofollow" href="#" title="Facebook"></a></li>
					<li class="tw pull-left"><a target="_blank" rel="nofollow" href="#" title="Twitter"></a></li>
					<li class="googleplus pull-left"><a target="_blank" rel="nofollow" href="#" title="GooglePlus"></a></li>
					<li class="rss pull-left"><a target="_blank" rel="nofollow" href="#" title="RSS"></a></li>
					<li class="pintrest pull-left"><a target="_blank" rel="nofollow" href="#" title="PInterest"></a></li>
					<li class="linkedin pull-left"><a target="_blank" rel="nofollow" href="#" title="Linkedin"></a></li>
					<li class="youtube pull-left"><a target="_blank" rel="nofollow" href="#" title="Youtube"></a></li>
				</ul>
			</div>
			<div class="col-xs-12 col-sm-4 no-padding copyright">Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>
			<div class="col-xs-12 col-sm-4 no-padding">
				<div class="clearfix payment-methods">
					<ul>
						<li><img src="assets/images/payments/1.png" alt=""></li>
						<li><img src="assets/images/payments/2.png" alt=""></li>
						<li><img src="assets/images/payments/3.png" alt=""></li>
						<li><img src="assets/images/payments/4.png" alt=""></li>
						<li><img src="assets/images/payments/5.png" alt=""></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</footer>
<!-- ============================================================= FOOTER : END============================================================= -->

<!-- For demo purposes – can be removed on production -->

<!-- For demo purposes – can be removed on production : End -->

<!-- JavaScripts placed at the end of the document so the pages load faster -->

<script th:src="@{/assets/js/jquery-1.11.1.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/bootstrap-hover-dropdown.min.js}"></script>
<script th:src="@{/assets/js/owl.carousel.min.js}"></script>
<script th:src="@{/assets/js/echo.min.js}"></script>
<script th:src="@{/assets/js/jquery.easing-1.3.min.js}"></script>
<script th:src="@{/assets/js/bootstrap-slider.min.js}"></script>
<script th:src="@{/assets/js/jquery.rateit.min.js}"></script>
<script th:src="@{/assets/js/lightbox.min.js}"></script>
<script th:src="@{/assets/js/bootstrap-select.min.js}"></script>
<script th:src="@{/assets/js/wow.min.js}"></script>
<script th:src="@{/assets/js/scripts.js}"></script>
</body>
</html>



